There's something wrong with my heart buttons under the "Recommended for You" section. On the "Recipe of the Day" post, the heart button works just fine. What I'm trying to do is get the number of likes for the posts on the right side to increase too. However, whenever I click the other heart buttons under the "Recommended for You" section, they only increase the number of likes for the ROTD post.
Here's the JavaScript and HTML code I used:
console.log("JavaScript is connected");
let numCount = 68
let count = document.querySelector('.count')
function addLike () {
numCount ++
count.innerText = numCount
}<div class="likebtn1">
<button class= "heartbtn" onclick="addLike()"><img src="imgs/heart.png" class="heart" alt="the heart-like button"></button>
<p class="yurilike"><span class="count">68</span></p>
</div>
<div class="likebtn2">
<button class="heartbtn" onclick="addLike()"><img src="imgs/heart.png" class="heart2" alt="the heart-like button"></button>
<p class="Emilike"><span class="count">212</span></p>
</div>
<div class="likebtn3">
<button class="heartbtn" onclick="addLike()"><img src="imgs/heart.png" class="heart3" alt="the heart-like button"></button>
<p class="Marisalike"><span class="count">33</span></p>
</div>Whenever I try to create separate functions for the RFY section posts and do the same thing for the other heart buttons, they all just stop working and don't do anything.
Here's a video to show what I'm talking about: https://www.youtube.com/watch?v=8NYqizDBkZk
It's because querySelector always returns the first element that matches the query. When you do
document.querySelector('.count')
It's always giving you the same .count div, regardless of which like button was pressed.
You need to use a more specific query like .likebtn2 .count, or give each count a unique class name.
document.body.addEventListener('click', (event) => {
const button = event.target.closest('.button');
if (!button) return;
const container = button.closest('.likes');
if (!container) return;
const counter = container.querySelector('.counter');
if (!counter) return;
counter.innerText = Number(counter.innerText) + 1;
});<div class="likes">
<button class="button">I love it!</button>
<div class="counter">0</div>
</div>
<div class="likes">
<button class="button">I love it!</button>
<div class="counter">0</div>
</div>
<div class="likes">
<button class="button">I love it!</button>
<div class="counter">0</div>
</div>Change your JS code to the one I have and then add the this keyword to your button that invokes the JS function.
function addLike(e){
let count = Number(e.nextElementSibling.innerText) + 1;
e.nextElementSibling.innerText = count;
}<div class="likebtn1">
<button class= "heartbtn" onclick="addLike(this)"><img src="imgs/heart.png" class="heart" alt="the heart-like button"></button>
<p class="yurilike"><span class="count">68</span></p>
</div>
<div class="likebtn2">
<button class="heartbtn" onclick="addLike(this)"><img src="imgs/heart.png" class="heart2" alt="the heart-like button"></button>
<p class="Emilike"><span class="count">212</span></p>
</div>
<div class="likebtn3">
<button class="heartbtn" onclick="addLike(this)"><img src="imgs/heart.png" class="heart3" alt="the heart-like button"></button>
<p class="Marisalike"><span class="count">33</span></p>
</div>